<template>
	<!--通讯录 增加-->
	<view class="page-content">
		<view class="page-top">
			<!-- 标题栏和状态栏占位符 -->
			<view class="titleNview-placing"></view>
			<!-- 搜索 -->
			<w-tit leftIcon="arrowleft" color="#595757" background="#fff" fontweight="600" @confirm="rightSearch"
				rightIconNum="two" is_searchs="true">
			</w-tit>
		</view>
		<view class="page-body">
			<w-phones :pageType="pageType" :phones="phones" :is_checked="false" @paramClick="paramClick"
				:is_shrink="is_shrink" @changecheck="changecheck" :sel_list="sel_list"></w-phones>
		</view>
		<view class="page-foot" @click="confirm">确认</view>
	</view>
</template>

<script>
	import wTit from '@/components/w-tit/w-tit-back-serch-add.vue'; //标题
	import wPhones from '@/components/w-phones/phone-directory.vue'; //通讯列表
	export default {
		name: "phones",
		components: {
			wTit,
			wPhones
		},
		data() {
			return {
				is_shrink: false,
				//示例数据
				phones: [],
				sel_list: [],
				pageType: '',
				id: 1,
			}
		},
		onShow() {
			this.getData();
		},
		onUnload() {
			//页面卸载传值
			let callbacke = '';
			if (this.pageType === 'flow') {
				callbacke = 'flow_contactAdd'
			}
			uni.$emit('callback', callbacke, this.id, this.sel_list)
		},
		onLoad(option) {
			console.log(222, option)
			if (option.pageType) {
				if (option.pageType === 'flow') {
					this.pageType = option.pageType;
					this.id = option.id
				}
			}
		},
		methods: {
			//确认
			confirm() {
				if (this.pageType === 'flow') {
					uni.navigateBack({
						delta: 1
					});
				}
			},
			//接口数据
			getData() {
				let phones = [{
						id: 1,
						no: 'A',
						name: '公司成员',
						pho: [{
							uid: 56,
							post: "经理",
							head: '/static/img/im/face/face_1.jpg',
							name: "阿坝"
						}, {
							uid: 57,
							post: "副经理",
							head: '/static/img/im/face/face_2.jpg',
							name: "阿克苏"
						}, {
							uid: 58,
							post: "主管",
							head: '/static/img/im/face/face_3.jpg',
							name: "阿拉善盟"
						}, {
							uid: 59,
							post: "",
							head: '/static/img/im/face/face_4.jpg',
							name: "阿勒泰"
						}, {
							uid: 60,
							post: "",
							head: '/static/img/im/face/face_5.jpg',
							name: "阿里"
						}, {
							uid: 61,
							post: "",
							head: '/static/img/im/face/face_6.jpg',
							name: "安康"
						}, {
							uid: 62,
							post: "",
							head: '/static/img/im/face/face_7.jpg',
							name: "安庆"
						}, {
							uid: 63,
							post: "",
							head: '/static/img/im/face/face_8.jpg',
							name: "鞍山"
						}, {
							uid: 64,
							post: "",
							head: '/static/img/im/face/face_9.jpg',
							name: "安顺"
						}, {
							uid: 65,
							post: "",
							head: '/static/img/im/face/face_10.jpg',
							name: "安阳"
						}, {
							uid: 338,
							post: "",
							head: '/static/img/im/face/face_11.jpg',
							name: "阿城"
						}, {
							uid: 339,
							post: "",
							head: '/static/img/im/face/face_12.jpg',
							name: "安福"
						}, {
							uid: 340,
							post: "",
							head: '/static/img/im/face/face_13.jpg',
							name: "安吉"
						}, {
							uid: 341,
							post: "",
							head: '/static/img/im/face/face_14.jpg',
							name: "安宁"
						}, {
							uid: 342,
							post: "",
							head: '/static/img/im/face/face_15.jpg',
							name: "安丘"
						}],
					},
					{
						id: 2,
						no: 'B',
						name: '设计部',
						pho: [{
							uid: 1,
							post: "",
							head: '/static/img/im/face/face_19.jpg',
							name: "北京"
						}, {
							uid: 66,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "白城"
						}, {
							uid: 67,
							post: "",
							head: '/static/img/im/face/face_2.jpg',
							name: "百色"
						}, {
							uid: 68,
							post: "",
							head: '/static/img/im/face/face_3.jpg',
							name: "白山"
						}, {
							uid: 69,
							post: "",
							head: '/static/img/im/face/face_4.jpg',
							name: "白银"
						}, {
							uid: 70,
							post: "",
							head: '/static/img/im/face/face_5.jpg',
							name: "蚌埠"
						}, {
							uid: 71,
							post: "",
							head: '/static/img/im/face/face_6.jpg',
							name: "保定"
						}],
					},
					{
						id: 3,
						no: 'C',
						name: '产品部',
						pho: [{
							uid: 2,
							post: "经理",
							head: '/static/img/im/face/face_1.jpg',
							name: "重庆"
						}, {
							uid: 5,
							post: "组长",
							head: '/static/img/im/face/face_2.jpg',
							name: "长春"
						}, {
							uid: 6,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "长沙"
						}, {
							uid: 7,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "常州"
						}, {
							uid: 8,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "成都"
						}, {
							uid: 84,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "沧州"
						}, {
							uid: 85,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "常德"
						}, {
							uid: 86,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "昌都"
						}, {
							uid: 87,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "昌吉"
						}],
					},
					{
						id: 4,
						no: 'D',
						name: '产品部',
						pho: [{
							uid: 25,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "昆明"
						}, {
							uid: 174,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "开封"
						}, {
							uid: 175,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "喀什地"
						}, {
							uid: 176,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "克拉玛依"
						}, {
							uid: 177,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "克孜勒"
						}, {
							uid: 555,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "开化"
						}, {
							uid: 556,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "开平"
						}, {
							uid: 557,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "开县"
						}, {
							uid: 558,
							post: "副经理",
							head: '/static/img/im/face/face_1.jpg',
							name: "开阳"
						}, {
							uid: 559,
							post: "经理",
							head: '/static/img/im/face/face_1.jpg',
							name: "康平"
						}, {
							uid: 560,
							post: "经理",
							head: '/static/img/im/face/face_1.jpg',
							name: "垦利"
						}, {
							uid: 561,
							post: "kunshan",
							head: '/static/img/im/face/face_1.jpg',
							name: "昆山"
						}]
					}, {
						id: 5,
						no: 'E',
						name: '产品部',
						pho: [{
							uid: 203,
							post: "maanshan",
							head: '/static/img/im/face/face_1.jpg',
							name: "马鞍山"
						}, {
							uid: 204,
							post: "maoming",
							head: '/static/img/im/face/face_1.jpg',
							name: "茂名"
						}]
					}
				]
				if (phones && phones.length > 0) {
					phones.forEach(item => {
						item.pho.forEach(ite => {
							this.$set(ite, 'checked', false)
						})
					})
				}
				this.phones = phones;
			},
			//左侧导航收缩
			navShow(is_shrink) {
				console.log(111, is_shrink)
				this.is_shrink = !is_shrink
			},
			rightSearch() {

			},
			changecheck(uid, checked) {
				console.log(1, uid, checked)
				console.log(2, this.phones)
				if (this.phones && this.phones.length > 0) {
					this.phones.forEach((item, i) => {
						item.pho.forEach((ite, ii) => {
							if (uid === ite.uid) {
								ite.checked = !checked
							}
						})
					})
				}
				let sel_list = []
				if (this.phones && this.phones.length > 0) {
					this.phones.forEach((item, i) => {
						item.pho.forEach((ite, ii) => {
							if (ite.checked === true) {
								this.sel_show = true
								sel_list.push(ite)
							}
						})
					})
					this.sel_list = sel_list;
				}
				console.log(3, this.sel_list)
			},
			paramClick(e) {
				console.log(121, e)
			}
		}
	}
</script>

<style lang="scss">
	.titleNview-placing {
		height: var(--status-bar-height);
		box-sizing: content-box;
		background: $uni-bg-color;
		display: block;
		position: sticky;
		top: 0rpx;
		z-index: 9999;
		overflow: hidden
	}

	.page-content {
		display: flex;
		flex-direction: column;
		position: relative;
		height: 100%;
		background: $uni-bg-color-grey;

		.page-foot {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			height: 100rpx;
			width: 100%;
			text-align: center;
			background: $uni-but-bg-color;
			line-height: 100rpx;
			color: $font-color-w;
		}

		.page-body {
			display: flex;
			flex-direction: column;
			height: calc(100% - 190rpx - var(--status-bar-height));
		}

		.page-top {
			border-bottom: 1rpx solid $uni-bg-color-grey;
			box-sizing: content-box;
			background: $uni-bg-color;
			display: block;
			position: sticky;
			top: 0rpx;
			z-index: 9999;
		}
	}
</style>
